<!DOCTYPE html>
<html>
	<head>
		<!--
        	作者：刘开新
        	时间：2018-09-27
        	描述：
        -->
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			b{
				color: red;
			}
		</style>
	</head>
	<body>
		账号设置<input type="text" id="userid" onchange="userid()"  placeholder="请输入邮箱/手机号码"><b id="text1"></b> <br />
		用户名设置<input type="text" id="username" onchange="username()" placeholder="由4-16位字母、数字组成"><b id="text2"></b><br />
		密码设置<input type="password" id="mima" onchange="mima()" placeholder="至少六位数"><b id="text3"></b><br />
		确认密码<input type="password" id="mima1" onchange="mima1()" ><b id="text6"></b><br />
		电子邮箱<input type="text" id="email" onchange="email()"><b id="text4"></b><br />
		联系方式<input type="text" id="phone" onchange="phone()"><b id="text5"></b><br />
		<button onclick="userid(),username(),mima(),mima1(),email(),phone()">注册</button>
		<script type="text/javascript">
			function userid(){
				var id=document.getElementById("userid");
				var str1= /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
				var str2=/^[1][3,4,5,7,8][0-9]{9}$/;
				if(id.value==""){
					document.getElementById("text1").innerHTML="不能为空!!";
				}else if(str1.test(id.value)!=true&&str2.test(id.value)!=true){
					document.getElementById("text1").innerHTML="格式错误!!";
				}else{
					document.getElementById("text1").innerHTML="";
				}	
			}
			
			
			function username(){
				var id=document.getElementById("username");
				var str= /^[a-zA-Z0-9]{4,16}$/;
				if(id.value==""){
					document.getElementById("text2").innerHTML="不能为空!!";
				}else if(str.test(id.value)!=true){
					document.getElementById("text2").innerHTML="格式错误!!";
				}else{
					document.getElementById("text2").innerHTML="";
				}	
			}
			
			function mima(){
				var id=document.getElementById("mima");
				var str= /^(\w){6,20}$/;;
				if(id.value==""){
					document.getElementById("text3").innerHTML="不能为空!!";
				}else if(str.test(id.value)!=true){
					document.getElementById("text3").innerHTML="格式错误!!";
				}else{
					document.getElementById("text3").innerHTML="";
				}	
			}
			
			function mima1(){
				var id=document.getElementById("mima");
				var id1=document.getElementById("mima1");
				if(id1.value==""){
					document.getElementById("text6").innerHTML="不能为空!!";
				}else if(id.value!=id1.value){
					document.getElementById("text6").innerHTML="密码不一致";
				}else{
					document.getElementById("text6").innerHTML="";
				}	
			}
			
			function email(){
				var id=document.getElementById("email");
				var str= /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
				if(id.value==""){
					document.getElementById("text4").innerHTML="不能为空!!";
				}else if(str.test(id.value)!=true){
					document.getElementById("text4").innerHTML="格式错误!!";
				}else{
					document.getElementById("text4").innerHTML="";
				}	
			}
			
			function phone(){
				var id=document.getElementById("phone");
				var str=/^[1][3,4,5,7,8][0-9]{9}$/;
				if(id.value==""){
					document.getElementById("text5").innerHTML="不能为空!!";
				}else if(str.test(id.value)!=true){
					document.getElementById("text5").innerHTML="格式错误!!";
				}else{
					document.getElementById("text5").innerHTML="";
				}
			}
			
			
		
		</script>
	</body>
</html>
